<template>
  <view class="container-fluid pc-nav" style="">
  <view class="container ss-flex ss-flex-row" style="height: 60px; width: 1200px !important">
    <h1 style="width:255px;"><a class="navbar-brand" href="#"><img src="/static/images/shop/LOGO.jpg" class="bs-logo" alt="中国计划出版社微课程"/></a></h1>
    <ul class="nav nav-pills nav-shop ss-flex">
      <li class="nav-item">
        <a class="nav-link" key="0" @click="sheep.$router.go('/pages/index/index')">首页</a>
      </li>
      <li class="nav-item" key="1" id="goodslist">
        <a class="nav-link" @tap="sheep.$router.go('/pages/goods/list');getChannel();">课程</a>
      </li>
      <li class="nav-item" key="2" id="tikuindex">
        <a class="nav-link" @click="sheep.$router.go('/pages/tiku/index');getChannel();">题库</a>
      </li>
      <li class="nav-item" id="vaspduihuan">
        <a class="nav-link" @click="sheep.$router.go('/pages/index/user?path=duihuan');getChannel();">兑换增值服务</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="https://channels.weixin.qq.com/shop/b/hiGOzoTlXKkQO5d" target="_blank">图书</a>
      </li>
      <li class="nav-item" id="indexcart">
        <a class="nav-link" @click="sheep.$router.go('/pages/index/cart');getChannel();">购物车</a>
      </li>

      <li class="nav-item" style="margin-left: auto; position: relative; z-index: 1">
        <s-block v-for="(item, index) in template.data" :key="index">
          <s-block-item v-if="index==0" type="userCardPc" :data="item.data" :styles="item.style" />
        </s-block>
      </li>
    </ul>
	</view>
  </view>
  <view class="container-fluid" style="height: 10px; background-color:#f5f5f5;"></view>
	</template>

<script setup>
  import {
    computed,
    reactive,
    onMounted,
  } from 'vue';
  import {
    onLoad,
    onShow,
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { jquery } from '@/node_modules/jquery';
  import SUserCard from '@/sheep/components/s-user-card/s-user-card.vue';
  import node from '@/uni_modules/mp-html/components/mp-html/node/node.vue';
  //const $ = require('jquery').default;
  const state = reactive({
    nav: [
      {
      title:'',
        url:'',
    }
    ],
  });

  function getChannel(){
    let url = window.location.href;
    url = url.substring(url.lastIndexOf('#'));
    //alert(url);
    //console.log(url)
    //console.error(url.includes("goods"))
    $(".nav-item").removeClass("select-li");

    if(url.includes("goods/list")){
      $("#goodslist").addClass("select-li");
    }
    if(url.includes("tiku")){
      $("#tikuindex").addClass("select-li");
    }
    if(url.includes('path=duihuan')){
      $("#vaspduihuan").addClass("select-li");
    }
    if(url.includes("cart")){
      $("#indexcart").addClass("select-li");
    }
  }

/*  function getnav(){
    sheep.$api.pc_nav.getnav().then((res)=>{
      //console.log(res.data)
      state.nav = res.data;
    });
  }*/
  onMounted((options) => {
    getChannel();
  });



  const template = computed(() => sheep.$store('app').template.user);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  onShow(() => {
    sheep.$store('user').updateUserData();
  });

</script>

	<style scoped>
    .select-li{
      position: relative;
      :after{
        content: '';
        display: block;
        margin: 0 auto;
        width: 20px;
        height: 2px;
        background-color: #d00500;
      }
      a{
        font-weight: bold;
      }
    }
    .nav{
      border: 0;
      z-index: 1;
    }
    .pc-nav{
      background-color: #ffffff !important;
      border: 0;
      z-index: 30;


    }
    /*.nav-shop li{
      line-height: 80px;
    }*/
    .nav-shop a{
      color:#333333;
      font-size:18px;
      cursor:pointer;
    }
    .nav-item{
      margin: 0 5px;
      .dropdown-item{
        line-height: 32px;
      }
    }
    .nav-shop{
      a.login{
        padding: 0;
        font-size: 14px;
        display: inline-block;

      }
      a.register{
        padding: 0;
        padding-top: 8px;
        padding-left: 20px;
        font-size: 14px;
        display: inline-block;
      }

    }

    .bs-logo{
      max-width: 200px;
    }
	</style>